<template>
  <div>
    <el-table :data="tableData" size="mini" fit highlight-current-row>
      <el-table-column type="index" label="序号" align="center" fixed></el-table-column>
      <!-- prop: 字段名name, label: 展示的名称, fixed: 是否需要固定(left, right), minWidth: 设置列的最小宽度(不传默认值), oper: 是否有操作列
                     oper.name: 操作列字段名称, oper.clickFun: 操作列点击事件, formatData: 格式化内容 -->
      <el-table-column v-for="(th, key) in tableHeader" :key="key"
                       :sortable="th.sortable" :prop="th.prop" :label="th.label"
                       :fixed="th.fixed" :min-width="th.minWidth" align="center">
        <!-- 加入template主要是有操作一栏， 操作一栏的内容是相同的， 数据不是动态获取的，不过我这里操作一栏的名字定死了（oper表示是操作这一列，否则就不是） -->
        <template slot-scope="scope">
          <div v-if="th.oper">
            <el-button v-for="(o, key) in th.oper" :key="key" @click="customEven(o.clickFun,scope.row)" type="text"
                       size="small">
              {{o.name}}
            </el-button>
          </div>
          <div v-else>
            <span>{{ scope.row[th.prop] }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    props: {
      tableHeader: {
        type: Array,
        required: true
      },
      tableData:{
        type: Array,
        required: true
      }
    },
    methods:{
      customEven(evenStr,dataRow){
        this.$emit(evenStr,dataRow)
      }
    }
  }
</script>
